
@charset "UTF-8";
/* 重置*/
*, *:before, *:after {
  box-sizing: border-box;
}
body{
	margin: 0px;
}

/*布局实现*/
div.message {
  position: relative;
  width: 100%;
  height: 80px;
  padding-left: 30px;
}
div.message:before {
  color: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  position: absolute;
  left: 0px;
}
div.message label {
  position: relative;
  display: block;
  float: left;
  margin: 30px 20px;
}
div.message label input {
  width: 180px;
  height: 30px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  outline: none;
  border: 1px solid #fff;
  color:black;
  padding: 4px 0px 4px 30px;
  border-radius: 4px;
  text-indent: 38px;
  transition: all .3s ease-in-out;
}
div.message label input ::-webkit-input-placeholder {
  color: transparent;
}
div.message label input + span {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  background: #7AB893;
  display: inline-block;
  padding: 7px 4px;
  transform-origin: left center;
  transform: perspective(300px);
  transition: all .3s ease-in-out;
  border-radius: 4px 0 0 4px;
}
div.message label input:focus,
div.message label input:active {
  text-indent: 0;
  background: rgba(255, 255, 255, 0.2);
}
div.message label input:focus ::-webkit-input-placeholder,
div.message label input:active ::-webkit-input-placeholder {
  color: #f00;
}
div.message label input:focus + span,
div.message label input:active + span {
  background: #478560;
}

div.message {
  background: #1f687a;//设置div背景颜色
}

div.message input + span {
  transform-origin: left bottom;
}
div.message input:focus,
div.message input:active {
  border-radius: 0 4px 4px 0;
}
div.message input:focus + span,
div.message input:active + span {
  animation: swing 1s;
  animation-fill-mode: forwards;
  border-radius: 0 4px 4px 0;
}
@keyframes swing {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(116deg);
  }
  40% {
    transform: rotate(60deg);
  }
  60% {
    transform: rotate(98deg);
  }
  80% {
    transform: rotate(76deg);
  }
  100% {
    transform: rotate(82deg);
  }
}


